<template lang='pug'>
  .workers-plan
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 日期：
          DatePicker.input-has-border(:value="beginTime" type="date" placeholder="请选择日期" @on-change="dateChange")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 员工：
          .choose-saler
            Tooltip(placement="bottom" max-width="200" :disabled="!tipIsShow" theme="light")
              Input.input.input-has-border(v-model="dolderNames" type="text" readonly clearable @on-clear="salersClear")
              div(slot="content")
                .font-14 {{dolderNames}}
            .button(@click="chooseSaler") 选择
          Button.ml-15(type="info" @click="searchBtn") 查询
        Col.pr-20.mb-15(:md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 8 }" :xxl="{span: 12}")
          .d-flex
            Button.ml-15(type="info" @click="openModal") 新建目标任务
    Table.beautiful-table(width="100%" :loading="loading" stripe border :columns="thead" :data="listData" height="600")
      .target(slot-scope="{ row, index }" slot="target")
        .font-12 【计划】
        .font-12 本月合同目标：{{row.weekDetail && row.weekDetail.month_BillingTarget?row.weekDetail.month_BillingTarget:0}}元
        .font-12 本周合同目标：{{row.weekDetail && row.weekDetail.week_BillingTarget?row.weekDetail.week_BillingTarget:0}}元
        .font-12 本周商机目标：A：{{row.weekDetail && row.weekDetail.businessTargetA?row.weekDetail.businessTargetA:0}}，B：{{row.weekDetail && row.weekDetail.businessTargetB?row.weekDetail.businessTargetB:0}}，C：{{row.weekDetail && row.weekDetail.businessTargetC?row.weekDetail.businessTargetC:0}}
        br
        .font-12 【完成】
        .font-12 本月合同金额：{{row.weekDetail && row.weekDetail.monthlySignedAmt?row.weekDetail.monthlySignedAmt:0}}元
        .font-12 本周合同金额：{{row.weekDetail && row.weekDetail.weeklySignedAmt?row.weekDetail.weeklySignedAmt:0}}元
        .font-12 本周商机转化：A：{{row.weekDetail && row.weekDetail.aTypeCount?row.weekDetail.aTypeCount:0}}，B：{{row.weekDetail && row.weekDetail.bTypeCount?row.weekDetail.bTypeCount:0}}，C：{{row.weekDetail && row.weekDetail.cTypeCount?row.weekDetail.cTypeCount:0}}
      template(slot-scope="{ row, index }" slot="time")
        .font-12.time-td(v-for="(item,index) in row.detail" :key="index") {{item.title}}

      template(slot-scope="{ row, index }" slot="Mon_plan")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[0])" :key="index" @click="checkPlanFn(row, item)")
          span(v-for="(_,idx) in item.plan" :key="idx") {{_.content}}
      template(slot-scope="{ row, index }" slot="Mon_complete")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[0])" :key="index" @click="checkCompleteFn(row,item)")
          span(v-for="(_,idx) in item.complete" :key="idx") {{_.content}}

      template(slot-scope="{ row, index }" slot="Tues_plan")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[1])" :key="index" @click="checkPlanFn(row, item)")
          span(v-for="(_,idx) in item.plan" :key="idx") {{_.content}}
      template(slot-scope="{ row, index }" slot="Tues_complete")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[1])" :key="index" @click="checkCompleteFn(row, item)")
          span(v-for="(_,idx) in item.complete" :key="idx") {{_.content}}

      template(slot-scope="{ row, index }" slot="Wed_plan")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[2])" :key="index" @click="checkPlanFn(row, item)")
          span(v-for="(_,idx) in item.plan" :key="idx") {{_.content}}
      template(slot-scope="{ row, index }" slot="Wed_complete")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[2])" :key="index" @click="checkCompleteFn(row, item)")
          span(v-for="(_,idx) in item.complete" :key="idx") {{_.content}}

      template(slot-scope="{ row, index }" slot="Thurs_plan")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[3])" :key="index" @click="checkPlanFn(row, item)")
          span(v-for="(_,idx) in item.plan" :key="idx") {{_.content}}
      template(slot-scope="{ row, index }" slot="Thurs_complete")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[3])" :key="index" @click="checkCompleteFn(row, item)")
          span(v-for="(_,idx) in item.complete" :key="idx") {{_.content}}

      template(slot-scope="{ row, index }" slot="Fri_plan")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[4])" :key="index" @click="checkPlanFn(row, item)")
          span(v-for="(_,idx) in item.plan" :key="idx") {{_.content}}
      template(slot-scope="{ row, index }" slot="Fri_complete")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[4])" :key="index" @click="checkCompleteFn(row, item)")
          span(v-for="(_,idx) in item.complete" :key="idx") {{_.content}}

      template(slot-scope="{ row, index }" slot="Sat_plan")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[5])" :key="index" @click="checkPlanFn(row, item)")
          span(v-for="(_,idx) in item.plan" :key="idx") {{_.content}}
      template(slot-scope="{ row, index }" slot="Sat_complete")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[5])" :key="index" @click="checkCompleteFn(row, item)")
          span(v-for="(_,idx) in item.complete" :key="idx") {{_.content}}

      template(slot-scope="{ row, index }" slot="Sun_plan")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[6])" :key="index" @click="checkPlanFn(row, item)")
          span(v-for="(_,idx) in item.plan" :key="idx") {{_.content}}
      template(slot-scope="{ row, index }" slot="Sun_complete")
        .font-12.time-td.ellipsis(v-for="(item,index) in Mon_plan_arr(row.detail, dateData[6])" :key="index" @click="checkCompleteFn(row, item)")
          span(v-for="(_,idx) in item.complete" :key="idx") {{_.content}}
      .clearfix.pl-20.pr-20(slot="footer")
        Page(:total="TotalRows" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="" show-sizer)
    createsTarget(ref="createsTargetModal" :weekTargetData="weekTargetData" @date-change="weekTargetDataDateChange")
    visibvleTreeList(ref="treeModal" :treeData="treeData" @on-change="getSalerId")
    Modal(v-model="modalPlan" draggable scrollable :title="modalPlanTitle")
      ul.poptip-ul
        li(v-for="(_,idx) in modalPlanList" :key="idx") {{(idx + 1) + '：' + _.content}}
    Modal(v-model="modalComplete" draggable scrollable :title="modalCompleteTitle")
      ul.poptip-ul
        li(v-for="(_,idx) in modalCompleteList" :key="idx") {{(idx + 1) + '：' + _.content}}
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'
import createsTarget from '../modal/createsTarget.vue'
import WorkScheduleApi from '@/api/WorkSchedule.api.js'
import visibvleTreeList from '../../../HRDC-common/visibleTreeList.vue'

export default {
  name:'workers-plan',
  props:{},
  data () {
    return {
      modalPlan: false,
      modalPlanList: [],
      modalPlanTitle: '工作计划',
      modalComplete: false,
      modalCompleteList: [],
      modalCompleteTitle: '完成情况',

      dolderNames: '',
      salesIds: [],
      treeData: [],

      weekTargetData: {},
      beginTime: this.$moment(new Date()).format('YYYY-MM-DD'),
      loading: false,
      listData: [],
      dateData: [], // 表头日期数据
      planDetail: {},
      thead: [
        {
          title: '员工',
          minWidth: 100,
          align: 'center',
          key: 'name',
          fixed: 'left'
        },
        {
          title: '工作情况',
          minWidth: 250,
          align: 'center',
          slot: 'target'
          // fixed: 'left'
        },
        {
          title: '时间',
          minWidth: 120,
          align: 'center',
          slot: 'time',
          className: 'no-padding'
          // fixed: 'left'
        },
        {
          renderHeader: (h, params) => {
            let date = ''
            if (this.dateData.length > 0) {
              date = this.dateData[0].slice(0, 10)
            }
            return h('span', date + '  星期一')
          },
          align: 'center',
          children: [
            {
              title: '工作计划',
              minWidth: 120,
              slot: 'Mon_plan',
              align: 'center',
              className: 'no-padding'
            },
            {
              title: '完成情况',
              minWidth: 120,
              slot: 'Mon_complete',
              align: 'center',
              className: 'no-padding'
            }
          ]
        },
        {
          renderHeader: (h, params) => {
            let date = ''
            if (this.dateData.length > 0) {
              date = this.dateData[1].slice(0, 10)
            }
            return h('span', date + '  星期二')
          },
          align: 'center',
          children: [
            {
              title: '工作计划',
              minWidth: 95,
              slot: 'Tues_plan',
              align: 'center',
              className: 'no-padding'
            },
            {
              title: '完成情况',
              minWidth: 95,
              slot: 'Tues_complete',
              align: 'center',
              className: 'no-padding'
            }
          ]
        },
        {
          renderHeader: (h, params) => {
            let date = ''
            if (this.dateData.length > 0) {
              date = this.dateData[2].slice(0, 10)
            }
            return h('span', date + '  星期三')
          },
          align: 'center',
          children: [
            {
              title: '工作计划',
              minWidth: 95,
              slot: 'Wed_plan',
              align: 'center',
              className: 'no-padding'
            },
            {
              title: '完成情况',
              minWidth: 95,
              slot: 'Wed_complete',
              align: 'center',
              className: 'no-padding'
            }
          ]
        },
        {
          renderHeader: (h, params) => {
            let date = ''
            if (this.dateData.length > 0) {
              date = this.dateData[3].slice(0, 10)
            }
            return h('span', date + '  星期四')
          },
          align: 'center',
          children: [
            {
              title: '工作计划',
              minWidth: 95,
              slot: 'Thurs_plan',
              align: 'center',
              className: 'no-padding'
            },
            {
              title: '完成情况',
              minWidth: 95,
              slot: 'Thurs_complete',
              align: 'center',
              className: 'no-padding'
            }
          ]
        },
        {
          renderHeader: (h, params) => {
            let date = ''
            if (this.dateData.length > 0) {
              date = this.dateData[4].slice(0, 10)
            }
            return h('span', date + '  星期五')
          },
          align: 'center',
          children: [
            {
              title: '工作计划',
              minWidth: 95,
              slot: 'Fri_plan',
              align: 'center',
              className: 'no-padding'
            },
            {
              title: '完成情况',
              minWidth: 95,
              slot: 'Fri_complete',
              align: 'center',
              className: 'no-padding'
            }
          ]
        },
        {
          renderHeader: (h, params) => {
            let date = ''
            if (this.dateData.length > 0) {
              date = this.dateData[5].slice(0, 10)
            }
            return h('span', date + '  星期六')
          },
          align: 'center',
          children: [
            {
              title: '工作计划',
              minWidth: 95,
              slot: 'Sat_plan',
              align: 'center',
              className: 'no-padding'
            },
            {
              title: '完成情况',
              minWidth: 95,
              slot: 'Sat_complete',
              align: 'center',
              className: 'no-padding'
            }
          ]
        },
        {
          renderHeader: (h, params) => {
            let date = ''
            if (this.dateData.length > 0) {
              date = this.dateData[6].slice(0, 10)
            }
            return h('span', date + '  星期日')
          },
          align: 'center',
          children: [
            {
              title: '工作计划',
              minWidth: 95,
              slot: 'Sun_plan',
              align: 'center',
              className: 'no-padding'
            },
            {
              title: '完成情况',
              minWidth: 95,
              slot: 'Sun_complete',
              align: 'center',
              className: 'no-padding'
            }
          ]
        }
      ],
      PageIndex: 1,
      PageSize: 5,
      TotalRows: 0
    }
  },

  components: {
    createsTarget,
    visibvleTreeList
  },

  watch: {},
  computed: {
    Mon_plan_arr () {
      return (row, date) => {
        return this.getPlanArr(row, date)
      }
    },
    tipIsShow () {
      if (this.dolderNames) {
        return true
      } else {
        return false
      }
    }
  },

  beforeMount() {},

  created() {
    this.getList()
    this.getVisibleTreeList()
  },

  methods: {
    openModal () {
      this.$refs.createsTargetModal.show()
      this.getWeekPlan()
    },
    weekTargetDataDateChange (val) {
      console.log(val)
      this.weekTargetData.date = val
    },
    // 获取工作目标
    getWeekPlan () {
      WorkScheduleApi.GetWeekPlan({
        UserId: JSON.parse(localStorage.getItem('clientLoginInfo')).data.userId,
        Date: this.$moment(new Date()).format('YYYY-MM-DD')
      }).then(res => {
        if (res.data.success) {
          res.data.data.date = res.data.data.date.slice(0,10)
          console.log(res.data.data.date)
          this.weekTargetData = res.data.data
        }
      })
    }, 
    pageChangeFn (val) {
      this.PageIndex = val
      this.getList()
    },
    // 获取员工工作计划列表
    getList () {
      this.loading = true
      WorkScheduleApi.GetFullList({
        BeginTime: this.beginTime,
        UserIds: this.salesIds,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        this.loading = false
        if (res.data.success) {
          this.listData = res.data.data.userDetail
          this.dateData = res.data.data.date
          this.planDetail = res.data.data.details
          console.log(this.planDetail)
          this.TotalRows = res.data.totalRows
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    searchBtn () {
      this.PageIndex = 1
      this.getList()
    },
    dateChange (val) {
      this.beginTime = val
    },
    // 获取相应日期相应时间的工作计划
    getPlanArr (row, date) {
      let arr = []
      row.forEach(item => {
        let val = {}
        let key = date.slice(0, 10).replace(/-/g, '') + item.key
        val = this.planDetail[key]
        if (val) {
          arr.push(val)
        } else {
          arr.push({
            complete: [],
            plan: []
          })
        }
      })
      return arr
    },
    checkPlanFn (row, item) {
      if (item.plan.length > 0) {
        this.modalPlan = true
        this.modalPlanList = item.plan
        this.modalPlanTitle = row.name + '的工作计划'
      }
    },
    checkCompleteFn (row, item) {
      if (item.complete.length > 0) {
        this.modalComplete = true
        this.modalCompleteList = item.complete
        this.modalCompleteTitle = row.name + '的完成情况'
      }
    },
    getVisibleTreeList () {
      HRDCCustomerApi.GetVisibleTreeList().then(res => {
        console.log(res)
        this.treeData = res.data.data
      })
    },
    chooseSaler () {
      this.$refs.treeModal.show()
    },
    salersClear () {
      console.log(22222)
      this.salesIds = []
      this.getVisibleTreeList()
    },
    getSalerId (val) {
      console.log(val)
      let idArr = []
      let nameArr = []
      val.forEach(item => {
        if (item.type === "4") {
          idArr.push(item.id)
          nameArr.push(item.title)
        }
      })
      this.salesIds = idArr
      this.dolderNames = nameArr.join(',')
    }
  }


}

</script>
<style lang="less">
  .no-padding{
    .ivu-table-cell{
      padding: 0 !important;
    }
    .ivu-poptip{
      width: 100%;
      height: 100%;
    }
    .ivu-poptip-rel{
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
</style>

<style lang='less' scoped>
  .d-flex{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .target{
    text-align: left;
  }
  .time-td{
    padding: 2px 4px;
    height: 24px;
    border-bottom: 1px solid #cfeef9;
    cursor: pointer;
    &:last-child{
      border-bottom: none;
    }
  }
  .poptip-ul{
    color: #333;
  }
</style>